@import 'vue-snotify/styles/_shared/snotify';
@import 'vue-snotify/styles/_shared/animations';
@import 'vue-snotify/styles/_shared/icons';
@import 'vue-snotify/styles/dark/icon';

$snotify-toast-bg: #fff !default;
$snotify-toast-color: #000 !default;
$snotify-toast-progressBar: #c7c7c7 !default;
$snotify-toast-progressBarPercentage: #4c4c4c !default;

$snotify-border-width: 4px !default;
$snotify-simple-border-color: #000 !default;
$snotify-success-border-color: #4caf50 !default;
$snotify-info-border-color: #1e88e5 !default;
$snotify-warning-border-color: #ff9800 !default;
$snotify-error-border-color: #f44336 !default;
$snotify-async-border-color: $snotify-info-border-color !default;
$snotify-confirm-border-color: #009688 !default;
$snotify-prompt-border-color: $snotify-confirm-border-color !default;

.snotify {
	@media screen and (max-width: 600px) {
		left: 10px;
		right: 10px;
		width: auto;
	}
}

.snotifyToast {
	background-color: var(--color-navigation);
	cursor: pointer;
	display: block;
	height: 100%;
	margin: 5px;
	max-height: 300px;
	opacity: 0;
	overflow: hidden;
	pointer-events: auto;

	&--in {
		animation-name: appear;
	}

	&--out {
		animation-name: disappear;
	}

	&__inner {
		align-items: flex-start;
		color: var(--color-text);
		display: flex;
		flex-flow: column nowrap;
		font-size: 16px;
		justify-content: center;
		min-height: 78px;
		padding: 5px 65px 5px 15px;
		position: relative;
	}

	&__noIcon {
		padding: 5px 15px 5px 15px;
	}

	&__progressBar {
		background-color: var(--color-text-disabled);
		height: 5px;
		position: relative;
		width: 100%;

		&__percentage {
			background-color: var(--color-text-secondary);
			height: 5px;
			left: 0;
			max-width: 100%;
			position: absolute;
			top: 0;
		}
	}

	&__title {
		color: var(--color-text);
		font-size: 1.8em;
		line-height: 1.2em;
		margin-bottom: 5px;
	}

	&__body {
		color: var(--color-text);
		font-size: 1em;
	}
}

.snotifyToast-show {
	opacity: 1;
	transform: translate(0, 0);
}

.snotifyToast-remove {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transform: translate(0, 50%);
}

/***************
 ** Modifiers **
 **************/

.snotify-simple {
	border-left: $snotify-border-width solid $snotify-simple-border-color;
}

.snotify-success {
	border-left: $snotify-border-width solid $snotify-success-border-color;
}

.snotify-info {
	border-left: $snotify-border-width solid $snotify-info-border-color;
}

.snotify-warning {
	border-left: $snotify-border-width solid $snotify-warning-border-color;
}

.snotify-error {
	border-left: $snotify-border-width solid $snotify-error-border-color;
}

.snotify-async {
	border-left: $snotify-border-width solid $snotify-async-border-color;
}

.snotify-confirm {
	border-left: $snotify-border-width solid $snotify-confirm-border-color;
}

.snotify-prompt {
	border-left: $snotify-border-width solid $snotify-prompt-border-color;
}

.snotify-confirm,
.snotify-prompt {
	.snotifyToast__inner {
		padding: 10px 15px;
	}
}
